<template>
  <div class="demand-page-box">
    <div class="page-container">
      <!-- 检索条件 -->
      <div class="form-parent-newbox1">
        <div class="form-title-area">
          <div class="form-title-left-area">
            <span>查询条件</span>
          </div>
          <div class="form-title-right-area">
            <el-button size="mini" icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
            <el-button size="mini" icon="el-icon-refresh" type="primary" @click="handleReset">重置</el-button>
          </div>
        </div>
        <el-form size="mini" class="form-area-box" :inline="true" :model="formData" label-position="left">
          <el-row>
            <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="6">
              <el-form-item label="角色名称">
                <el-input v-model="formData.roleName" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="table-buttons-box">
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAddRole">添加</el-button>
      </div>
      <el-table ref="tb" :data="tableData" tooltip-effect="dark" style="width: 100%" :height="tableHeight" border :header-cell-style="{
            background: '#FAFAFA',
            color: '#262626',
            textAlign: 'center',
          }" highlight-current-row>
        <el-table-column align="center" width="80" label="序号" type="index" :index="indexMethod"></el-table-column>
        <el-table-column align="center" prop="roleName" label="角色名称" min-width="120"></el-table-column>
        <el-table-column align="center" prop="roleCode" label="角色编码" min-width="120"></el-table-column>
        <el-table-column align="left" prop="remark" label="备注" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="createTimeShow" label="创建时间" min-width="120"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdateRole(scope.row)">修改</el-button>
            <el-button size="mini" type="text" @click="handleDeleteRole(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :totalCount="totalCount" :currentPage="currentPage" :pageSizeList="pageSizeList" :pageSize="pageSize" class="pagination-area-box"></Pagination>
    </div>
    <!-- 新增/编辑用户 弹框 -->
    <el-dialog :title="showCreateRoleTKTitle" width="80%" :append-to-body="true" :visible.sync="showCreateRoleTK" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form label-width="100px" label-position="left" :model="roleInfo" :rules="rules" ref="createRoleInfo">
        <el-form-item label="角色名称" prop="roleName">
          <el-input type="text" v-model="roleInfo.roleName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="角色编码" prop="roleCode">
          <el-input type="text" v-model="roleInfo.roleCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="4" v-model="roleInfo.remark" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" icon="el-icon-close" @click="showCreateRoleTK = false">取消</el-button>
        <el-button size="mini" icon="el-icon-check" type="primary" @click="handleSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
let me;
import Pagination from "@/components/common/pagination";
import publicFunc from "@/resources/js/publicFunc";
import {
  roleList,
  deleteRole,
  addRole,
  updateRole,
} from "@/api/permissionManage/role.api";
export default {
  data() {
    return {
      publicFunc: publicFunc,
      // 表单
      formData: {
        roleName: "",
      },
      // 表格和分页
      tableHeight: "74vh",
      tableData: [],
      totalCount: 0,
      currentPage: 1,
      pageSizeList: [10, 20, 50],
      pageSize: 10,
      showCreateRoleTKTitle: "",
      showCreateRoleTK: false,
      roleInfo: {
        id: "",
        roleName: "",
        roleCode: "",
        remark: "",
      },
      rules: {
        roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        roleCode: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
      },
    };
  },
  components: {
    Pagination,
  },
  mounted() {
    me = this;
    me.queryItemsList();
    me.$nextTick(() => {
      let formHeight = document.querySelector(".form-parent-newbox1");
      let tableButtonHeight = document.querySelector(".table-buttons-box");
      let paginationHeight = document.querySelector(".pagination-area-box");
      me.tableHeight =
        window.innerHeight -
        formHeight.offsetHeight -
        tableButtonHeight.offsetHeight -
        paginationHeight.offsetHeight -
        20 +
        "px";
    });
    window.onresize = function (res) {
      me.$nextTick(() => {
        let formHeight = document.querySelector(".form-parent-newbox1");
        let tableButtonHeight = document.querySelector(".table-buttons-box");
        let paginationHeight = document.querySelector(".pagination-area-box");
        me.tableHeight =
          window.innerHeight -
          formHeight.offsetHeight -
          tableButtonHeight.offsetHeight -
          paginationHeight.offsetHeight -
          20 +
          "px";
      });
    };
  },
  beforeDestroy() {
    window.onresize = function () { };
  },
  methods: {
    // 查询
    handleQuery() {
      me.currentPage = 1;
      me.queryItemsList();
    },
    // 重置
    handleReset() {
      me.formData.roleName = "";
      me.currentPage = 1;
      me.queryItemsList();
    },
    // 每页展示数量变化时
    handleSizeChange(e) {
      me.pageSize = e;
      me.currentPage = 1;
      me.queryItemsList();
    },
    // 当前页码变化时
    handleCurrentChange(e) {
      me.currentPage = e;
      me.queryItemsList();
    },
    // 封装查询和导出的参数列表
    getQueryParam() {
      let param = {
        roleName: me.formData.roleName,
      };
      return param;
    },
    // 查询表格数据
    queryItemsList() {
      let param = {
        size: me.pageSize,
        page: me.currentPage,
        ...me.getQueryParam(),
      };
      var rLoading = me.openLoading();
      roleList(param)
        .then((res) => {
          rLoading.close();
          if (res.code == "200") {
            me.tableData = res.data.map(item => {
              return {
                createTimeShow: item.createTime ? item.createTime.split(".000")[0].replace("T", " ") : "",
                ...item
              }
            });
            me.totalCount = res.total;
          } else {
            me.$message.error(res.msg || "查询失败，请稍后再试~");
          }
        })
        .catch((err) => {
          rLoading.close();
          me.$message.error(err.statusText || "对不起，系统繁忙，请稍后再试~");
        });
    },
    //   序号获取
    indexMethod(index) {
      var total = me.pageSize * (me.currentPage - 1);
      return total + index + 1;
    },
    // 添加
    handleAddRole() {
      me.roleInfo = {
        id: "",
        roleName: "",
        roleCode: "",
        remark: "",
      };
      me.showCreateRoleTKTitle = "添加角色";
      me.showCreateRoleTK = true;
      me.$nextTick(() => {
        me.$refs.createRoleInfo.clearValidate();
      })
    },
    // 修改
    handleUpdateRole(item) {
      me.roleInfo = {
        id: item.id,
        roleName: item.roleName,
        roleCode: item.roleCode,
        remark: item.remark,
      };
      me.showCreateRoleTKTitle = "编辑角色";
      me.showCreateRoleTK = true;
      me.$nextTick(() => {
        me.$refs.createRoleInfo.clearValidate();
      })
    },
    // 添加或修改
    handleSave() {
      let errorTip = !me.roleInfo.roleName
        ? "请输入角色名称"
        : !me.roleInfo.roleCode
          ? "请输入角色编码"
          : "";
      if (!!errorTip) {
        me.$message.error(errorTip);
        return;
      }
      let param = {
        roleName: me.roleInfo.roleName,
        roleCode: me.roleInfo.roleCode,
        remark: me.roleInfo.remark,
      };
      //   判断是新增还是修改，调的接口不同，要不要传id
      if (me.roleInfo.id) {
        param.id = me.roleInfo.id;
        confirmSave(updateRole(param));
      } else {
        confirmSave(addRole(param));
      }
      function confirmSave(pro) {
        let rLoading = me.openLoading();
        pro.then((res) => {
          rLoading.close();
          if (res.code == "200") {
            me.showCreateRoleTK = false;
            me.$message.success("操作成功~");
            me.queryItemsList();
          } else {
            me.$message.error(res.msg || "操作失败，请稍后再试~");
          }
        })
          .catch((err) => {
            rLoading.close();
            me.$message.error(err.statusText || "对不起，系统繁忙，请稍后再试~");
          });
      }
    },
    // 删除角色
    handleDeleteRole(item) {
      me.$alert(`您确认删除${item.roleName}吗？`, "温馨提示", {
        confirmButtonText: "确认",
        callback: (action) => {
          if (action == "confirm") {
            let rLoading = me.openLoading();
            deleteRole({
              id: item.id,
            })
              .then((res) => {
                rLoading.close();
                if (res.code == "200") {
                  me.$message.success("已删除~");
                  me.queryItemsList();
                } else {
                  me.$message.error(res.msg || "删除失败，请稍后再试~");
                }
              })
              .catch((err) => {
                rLoading.close();
                me.$message.error(err.statusText || "对不起，系统繁忙，请稍后再试~");
              });
          }
        },
      });
    },
  },
};
  </script>
  <style lang="less" scoped>
.page-container {
  .el-form {
    /deep/.el-col {
      .el-form-item {
        .el-form-item__label {
          width: 80px;
        }

        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
    }

    .el-button--primary {
      color: #fff;
    }
  }
}
/deep/.el-dialog {
  .el-dialog__body {
    max-height: 60vh;
    overflow: auto;
    .el-form {
      .el-form-item {
        margin-top: 1.2em;
        .el-form-item__content {
          .el-select {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
  